import { Box, Typography, Paper, Card, CardContent, Divider, Link } from '@mui/material';

export default function AboutPage() {
  return (
    <Box sx={{ width: '100%' }}>
      <Paper 
        elevation={3} 
        sx={{ p: 3, mb: 4, borderRadius: 2, bgcolor: 'background.paper' }}
      >
        <Typography variant="h4" gutterBottom sx={{ textAlign: 'center', fontWeight: 'bold', color: '#2a384d' }}>
          关于我们
        </Typography>
        
        <Typography variant="body1" paragraph sx={{ mt: 2 }}>
          这是一个使用Tauri和React构建的跨平台应用程序。Tauri允许你使用Web技术构建轻量级、安全且高性能的桌面和移动应用程序。
        </Typography>

        <Divider sx={{ my: 3 }} />
        
        <Card sx={{ mb: 3 }}>
          <CardContent>
            <Typography variant="h6" gutterBottom color="primary">
              技术栈
            </Typography>
            <Typography variant="body2" paragraph>
              • Tauri - 安全、轻量级的跨平台应用开发框架
            </Typography>
            <Typography variant="body2" paragraph>
              • React - 用户界面库
            </Typography>
            <Typography variant="body2" paragraph>
              • Material UI - 组件库
            </Typography>
            <Typography variant="body2" paragraph>
              • Rust - 后端代码
            </Typography>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent>
            <Typography variant="h6" gutterBottom color="primary">
              联系方式
            </Typography>
            <Typography variant="body2" paragraph>
              如果您有任何问题或建议，请通过以下方式联系我们:
            </Typography>
            <Typography variant="body2" paragraph>
              Email: <Link href="mailto:contact@example.com">contact@example.com</Link>
            </Typography>
            <Typography variant="body2" paragraph>
              Website: <Link href="https://example.com" target="_blank" rel="noopener">example.com</Link>
            </Typography>
          </CardContent>
        </Card>
      </Paper>
    </Box>
  );
} 